<template>
  <div>
    <el-dialog
      :title="title"
      :visible="dialogVisible"
      :show-close="false"
      width="600px"
    >
      <el-form
        ref="typeDialog"
        :model="row"
        label-width="120px"
        :rules="rules"
        :disabled="row.state === 0"
      >
        <el-form-item label="类型:" prop="type">
          <el-radio-group v-model="row.type">
            <el-radio label="0">车辆品牌</el-radio>
            <el-radio label="1">车辆类型</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="名称:" prop="name">
          <el-input
            v-model="row.name"
            size="medium"
            style="width: 250px;"
            placeholder="请输入名称"
          />
        </el-form-item>
        <el-form-item label="排序:" prop="sort">
          <el-input
            v-model="row.sort"
            size="medium"
            style="width: 250px;"
            placeholder="请输入序号"
          />
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button
          @click="handleCancel"
        >
          取 消
        </el-button>
        <el-button
          type="primary"
          @click="handleConfirm"
        >
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: 'TypeDialog',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      title: '',
      rules: {
        type: {
          required: true,
          message: '请选择类型',
          trigger: 'change'
        },
        name: {
          required: true,
          message: '名称不能为空',
          trigger: 'blur'
        },
        sort: {
          required: true,
          message: '序号不能为空',
          trigger: 'blur'
        }
      }
    }
  },
  updated() {
    if (this.row.id) {
      this.title = '编辑'
    } else {
      this.title = '新增'
    }
  },
  methods: {
    handleCancel() {
      this.$emit('cancel-dialog')
      this.$refs.typeDialog.resetFields()
    },
    handleConfirm() {
      this.$refs.typeDialog.validate((valid) => {
        if (valid) {
          this.$emit('confirm-dialog', {
            dialog: this.$refs.typeDialog,
            id: this.row.id,
            type: this.row.type,
            name: this.row.name,
            sort: this.row.sort
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style>
</style>
